.full-width {width: 100%;}
.width50 {width: 50%;}
.width33 {width: 33%;}
.full-height {height: 100%;}
.fit {width: 100%;height: 100%;}
.hide {display: none !important;}
.index10 {z-index: 10;}
.index999 {z-index: 999;}

/**common**/
.rtl .text-right {text-align: right;}
.ltr .text-right {text-align: left;}
.text-center {text-align: center;}
.rtl .text-left {text-align: left;}
.ltr .text-left {text-align: right;}
.text-justify {text-align: justify;}
.text-start {text-align: start;}
.text-end {text-align: end;}
.text-nowrap {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.text-tail-clip {display: -webkit-box;-webkit-box-orient: horizontal;-webkit-line-clamp: 1;overflow: hidden;}
.line-through{text-decoration: line-through;}

/**display**/
.d-block {display: block;}
.d-inline-block {display: inline-block;}
.d-inline {display: inline;}
.d-flex {display: flex;}
.flex-center{align-items: center;justify-content: center;}
/* flex directions */
.flex-row {flex-direction: row;}
 
.flex-row-reverse {flex-direction: row-reverse;}
.flex-col {flex-direction: column;}
.flex-col-reverse {flex-direction: column-reverse;}
.row {display: flex;flex-direction: row;}
.col {display: flex;flex-direction: column;}
 
/* flex alings */
.justify-center {justify-content: center;}
.justify-around {justify-content: space-around;}
.justify-between {justify-content: space-between;}
.justify-evenly { justify-content: space-evenly;}
.justify-start {justify-content: start;}
.justify-end {justify-content: end;}
.justify-f-start {justify-content: flex-start;}
.justify-f-end {justify-content: flex-end;}
/* flex */
.flex-1 {flex: 1;}
/* flex wrap */
.flex-wrap {flex-wrap: wrap;}
.flex-wrap-reverse {flex-wrap: wrap-reverse;}
.flex-nowrap {flex-wrap: nowrap;}
/*  align items */
.items-stretch {align-items: stretch;}
.items-center {align-items: center;}
.items-start {align-items: start;}
.items-end {align-items: end;}
.items-flex-end{align-items: flex-end;}
/* align self */
.self-strech {align-self: stretch;}
.sefl-center {align-self: center;}
.self-start {align-self: start;}
.self-end {align-self: end;}
/**margin top and right and bottom and left**/
.ma-none {margin: 0px !important;}
.ma-xs {margin: 8rpx;}
.ma-sm {margin: 16rpx;}
.ma-md {margin: 32rpx;}
.ma-lg {margin: 48rpx;}
.ma-xl {margin: 96rpx;}
 
/**padding top and right and bottom and left**/
.pa-none {padding: 0px !important;}
.pa-xs {padding: 8rpx;}
.pa-sm {padding: 16rpx;}
.pa-md {padding: 32rpx;}
.pa-lg {padding: 48rpx;}
.pa-xl {padding: 96rpx;}
/**margin top and  bottom**/
.my-none {margin-top: 0px !important;margin-bottom: 0px !important;}
.my-xs {margin-top: 8rpx;margin-bottom: 8rpx;}
.my-sm {margin-top: 16rpx;margin-bottom: 16rpx;}
.my-md {margin-top: 32rpx;margin-bottom: 32rpx;}
.my-lg {margin-top: 48rpx;margin-bottom: 48rpx;}
.my-xl {margin-top: 96rp;margin-bottom: 96rpx;}
/**padding top and  bottom**/
.py-none {padding-top: 0px !important;padding-bottom: 0px !important;}
.py-xs {padding-top: 8rpx;padding-bottom: 8rpx;}
.py-md {padding-top: 32rpx;padding-bottom: 32rpx;}
.py-lg {padding-top: 48rpx;padding-bottom: 48rpx;}
.py-sm {padding-top: 16rpx;padding-bottom: 16rpx;}
.py-xl {padding-top: 96rpx;padding-bottom: 96rpx;}
/**margin right and  left**/
.mx-none {margin-right: 0px !important;margin-left: 0px !important;}
.mx-auto{margin-right: auto;margin-left: auto;}
.mx-xs {margin-right: 8rpx;margin-left: 8rpx;}
.mx-sm {margin-right: 16rpx;margin-left: 16rpx;}
.mx-md {margin-right: 32rpx;margin-left: 32rpx;}
.mx-lg {margin-right: 48rpx;margin-left: 48rpx;}
.mx-xl {margin-right: 96rpx;margin-left: 96rpx;}
/**padding right and  left**/
.px-none {padding-right: 0px !important;padding-left: 0px !important;}
.px-xs {padding-right: 8rpx;padding-left: 8rpx;}
.px-sm {padding-right: 16rpx;padding-left: 16rpx;}
.px-md {padding-right: 32rpx;padding-left: 32rpx;}
.px-lg {padding-right: 48rpx;padding-left: 48rpx;}
.px-xl {padding-right: 96rpx;padding-left: 96rpx;}
/**margin top**/
.mt-none {margin-top: 0px !important;}
.mt-xs {margin-top: 8rpx;}
.mt-sm {margin-top: 16rpx;}
.mt-md {margin-top: 32rpx;}
.mt-lg {margin-top: 48rpx;}
.mt-xl {margin-top: 96rpx;}
/**padding top**/
.pt-none {padding-top: 0px !important;}
.pt-xs {padding-top: 8rpx;}
.pt-sm {padding-top: 16rpx;}
.pt-md {padding-top: 32rpx;}
.pt-lg {padding-top: 48rpx;}
.pt-xl {padding-top: 96rpx;}
/**margin right rtl**/
.rtl .mr-none {margin-right: 0px !important;}
.rtl .mr-xs {margin-right: 8rpx;}
.rtl .mr-sm {margin-right: 16rpx;}
.rtl .mr-md {margin-right: 32rpx;}
.rtl .mr-lg {margin-right: 48rpx;}
.rtl .mr-xl {margin-right: 96rpx;}
/**margin right ltr**/
.ltr .mr-none {margin-left: 0px !important;}
.ltr .mr-xs {margin-left: 8rpx;}
.ltr .mr-sm {margin-left: 16rpx;}
.ltr .mr-md {margin-left: 32rpx;}
.ltr .mr-lg {margin-left: 48rpx;}
.ltr .mr-xl {margin-left: 96rpx;}
/**padding right rtl**/
.rtl .pr-none {padding-right: 0px !important;}
.rtl .pr-xs {padding-right: 8rpx;}
.rtl .pr-sm {padding-right: 16rpx;}
.rtl .pr-md {padding-right: 32rpx;}
.rtl .pr-lg {padding-right: 48rpx;}
.rtl .pr-xl {padding-right: 96rpx;}
/**padding right ltr**/
.ltr .pr-none {padding-left: 0px !important;}
.ltr .pr-xs {padding-left: 8rpx;}
.ltr .pr-sm {padding-left: 16rpx;}
.ltr .pr-md {padding-left: 32rpx;}
.ltr .pr-lg {padding-left: 48rpx;}
.ltr .pr-xl {padding-left: 96rpx;}
/**margin bottom**/
.mb-none {margin-bottom: 0px !important;}
.mb-xs {margin-bottom: 8rpx;}
.mb-sm {margin-bottom: 16rpx;}
.mb-md {margin-bottom: 32rpx;}
.mb-lg {margin-bottom: 48rpx;}
.mb-xl {margin-bottom: 96rpx;}
/**padding bottom**/
.pb-none {padding-bottom: 0px !important;}
.pb-xs {padding-bottom: 8rpx;}
.pb-sm {padding-bottom: 16rpx;}
.pb-md {padding-bottom: 32rpx;}
.pb-lg {padding-bottom: 48rpx;}
.pb-xl {padding-bottom: 96rpx;}
 
/**margin left rtl**/
.rtl .ml-none {margin-left: 0px !important;}
.rtl .ml-xs {margin-left: 8rpx;}
.rtl .ml-sm {margin-left: 16rpx;}
.rtl .ml-md {margin-left: 32rpx;}
.rtl .ml-lg {margin-left: 48rpx;}
.rtl .ml-xl {margin-left: 96rpx;}
/**margin left ltr**/
.ltr .ml-none {margin-right: 0px !important;}
.ltr .ml-xs {margin-right: 8rpx;}
.ltr .ml-sm {margin-right: 16rpx;}
.ltr .ml-md {margin-right: 32rpx;}
.ltr .ml-lg {margin-right: 48rpx;}
.ltr .ml-xl {margin-right: 96rpx;}
/**padding left rtl**/
.rtl .pl-none {padding-left: 0px !important;}
.rtl .pl-xs {padding-left: 8rpx;}
.rtl .pl-sm {padding-left: 16rpx;}
.rtl .pl-md {padding-left: 32rpx;}
.rtl .pl-lg {padding-left: 48rpx;}
.rtl .pl-xl {padding-left: 96rpx;}
/**padding left ltr**/
.ltr .pl-none {padding-right: 0px !important;}
.ltr .pl-xs {padding-right: 8rpx;}
.ltr .pl-sm {padding-right: 16rpx;}
.ltr .pl-md {padding-right: 32rpx;}
.ltr .pl-lg {padding-right: 48rpx;}
.ltr .pl-xl {padding-right: 96rpx;}
/* padding inline start */
.pi-start-xs {padding-inline-start: 8rpx;}
.pi-start-sm {padding-inline-start: 16rpx;}
.pi-start-md {padding-inline-start: 32rpx;}
.pi-start-lg {padding-inline-start: 48rpx;}
.pi-start-xl {padding-inline-start: 96rpx;}
/* padding inline end */
.pi-end-xs {padding-inline-end: 8rpx;}
.pi-end-sm {padding-inline-end: 16rpx;}
.pi-end-md {padding-inline-end: 32rpx;}
.pi-end-lg {padding-inline-end: 48rpx;}
.pi-end-xl {padding-inline-end: 96rpx;}
/* padding inline start and end */
.pi-se-xs {padding-inline: 8rpx;}
.pi-se-sm {padding-inline: 16rpx;}
.pi-se-md {padding-inline: 32rpx;}
.pi-se-lg {padding-inline: 48rpx;}
.pi-se-xl {padding-inline: 96rpx;}
/**bg color list**/
.bg-none {background: none !important;}
.bg-white {background: white;}
.bg-white-2 {background: #f5f5f7;}
.bg-primary {background: #1976D2;}
.bg-secondary {background: #26A69A;}
.bg-accent {background: #9C27B0;}
.bg-dark {background: #1d1d1d;}
.bg-positive {background: #21BA45;}
.bg-negative {background: #C10015;}
.bg-red-8 {background: #d32f2f;}
.bg-info {background: #31CCEC;}
.bg-warning {background: #F2C037;}
.bg-gray {background: #8a989d;}
.bg-gray-white {background: #dadada;}
.bg-gray-rgba {background: rgba(0, 0, 0, .05);}
/* color list */
.text-white {color: white;}
.text-white-2 {color: #f5f5f7;}
.text-primary {color: #1976D2;}
.text-secondary {color: #26A69A;}
.text-accent {color: #9C27B0;}
.text-dark {color: #1d1d1d;}
.text-positive {color: #21BA45;}
.text-negative {color: #C10015;}
.text-red-8 {color: #d32f2f;}
.text-red {color:red;}
.text-info {color: #31CCEC;}
.text-warning {color: #F2C037;}
.text-gray {color: #8a989d;}
.text-gray-white {color: #dadada;}
/**shadows**/
.shadow-none {box-shadow: none;}
.shadow-0{box-shadow: 0px 2px 5px -1px #0505051a;}
.shadow-1 {box-shadow: 0 1px 3px rgb(141, 141, 141);}
.shadow-2 {box-shadow: 0 1px 5px rgb(141, 141, 141);}
.shadow-3 {box-shadow: 0 1px 8px rgb(141, 141, 141);}
.shadow-4 {box-shadow: 0 2px 4px -1px rgb(141, 141, 141);}
.shadow-5 {box-shadow: 0px 0px 12px -4px #0505051a;}
/* font sizes */
.fs-xxs {font-size: 20rpx;}
.fs-xs {font-size: 24rpx;}
.fs-sm {font-size: 28rpx;}
.fs-md {font-size: 32rpx;}
.fs-lg {font-size: 36rpx;}
.fs-xl {font-size: 40rpx;}
/**border styles**/
.bordered {border: 1px solid rgb(233, 229, 229);}
.bordered-bottom {border-bottom: 1px solid rgb(233, 229, 229);}
.rounded-borders {border-radius: 10rpx !important;}
.rounded-50 {border-radius: 50%;}
.rounded-26 {border-radius: 26rpx;}
.rounded-none {border-radius: 0px !important;}
.border-none{border: 0px !important;} 
/**font bold**/
.fw-bold{font-weight: bold;}
/* position */
.p-absolute{position: absolute;}
.p-relative{position: relative;}
.p-fixed{position: fixed;}

.dir-ltr {	direction: ltr;}
.dir-rtl {	direction: rtl;}

.transition-all-250ms-ease-in{
  transition: all 250ms ease-in;
}
.transition-all-100ms-ease-in {
  transition: all 100ms ease-in;
}